import React, { useState } from 'react';
import { Editor, EditorState, RichUtils, convertToRaw, getDefaultKeyBinding } from 'draft-js';
import 'draft-js/dist/Draft.css';
import { Card, Typography, Button, Space, Select } from 'antd';
import { BoldOutlined, ItalicOutlined, UnderlineOutlined, OrderedListOutlined, UnorderedListOutlined, UndoOutlined, RedoOutlined } from '@ant-design/icons';

const { Title, Paragraph } = Typography;

const DraftJSPage: React.FC = () => {
  const [editorState, setEditorState] = useState(() => EditorState.createEmpty());

  const handleKeyCommand = (command: string, editorState: EditorState) => {
    const newState = RichUtils.handleKeyCommand(editorState, command);
    if (newState) {
      setEditorState(newState);
      return 'handled';
    }
    return 'not-handled';
  };

  const toggleInlineStyle = (style: string) => {
    setEditorState(RichUtils.toggleInlineStyle(editorState, style));
  };

  const toggleBlockType = (blockType: string) => {
    setEditorState(RichUtils.toggleBlockType(editorState, blockType));
  };

  const isStyleActive = (style: string) => {
    const currentStyle = editorState.getCurrentInlineStyle();
    return currentStyle.has(style);
  };

  const getBlockType = () => {
    const selection = editorState.getSelection();
    return editorState
      .getCurrentContent()
      .getBlockForKey(selection.getStartKey())
      .getType();
  };

  const handleUndo = () => {
    setEditorState(EditorState.undo(editorState));
  };

  const handleRedo = () => {
    setEditorState(EditorState.redo(editorState));
  };

  const handleGetContent = () => {
    const contentState = editorState.getCurrentContent();
    const raw = convertToRaw(contentState);
    console.log('Draft.js content:', raw);
    console.log('Plain text:', contentState.getPlainText());
  };

  return (
    <div style={{ padding: '24px' }}>
      <Card>
        <Title level={2}>Draft.js 富文本编辑器</Title>
        <Paragraph>
          Draft.js 是 Facebook 开发的富文本编辑器框架，提供了不可变的编辑器状态和可扩展的架构。
        </Paragraph>
        
        <div style={{ marginTop: '20px' }}>
          <Space style={{ marginBottom: '16px', flexWrap: 'wrap' }}>
            <Select
              value={getBlockType()}
              style={{ width: 120 }}
              onChange={toggleBlockType}
              options={[
                { value: 'unstyled', label: '正文' },
                { value: 'header-one', label: '标题 1' },
                { value: 'header-two', label: '标题 2' },
                { value: 'header-three', label: '标题 3' },
                { value: 'blockquote', label: '引用' },
                { value: 'code-block', label: '代码块' },
              ]}
            />
            <Button
              type={isStyleActive('BOLD') ? 'primary' : 'default'}
              onClick={() => toggleInlineStyle('BOLD')}
              icon={<BoldOutlined />}
            >
              粗体
            </Button>
            <Button
              type={isStyleActive('ITALIC') ? 'primary' : 'default'}
              onClick={() => toggleInlineStyle('ITALIC')}
              icon={<ItalicOutlined />}
            >
              斜体
            </Button>
            <Button
              type={isStyleActive('UNDERLINE') ? 'primary' : 'default'}
              onClick={() => toggleInlineStyle('UNDERLINE')}
              icon={<UnderlineOutlined />}
            >
              下划线
            </Button>
            <Button
              type={getBlockType() === 'unordered-list-item' ? 'primary' : 'default'}
              onClick={() => toggleBlockType('unordered-list-item')}
              icon={<UnorderedListOutlined />}
            >
              无序列表
            </Button>
            <Button
              type={getBlockType() === 'ordered-list-item' ? 'primary' : 'default'}
              onClick={() => toggleBlockType('ordered-list-item')}
              icon={<OrderedListOutlined />}
            >
              有序列表
            </Button>
            <Button
              onClick={handleUndo}
              disabled={editorState.getUndoStack().size === 0}
              icon={<UndoOutlined />}
            >
              撤销
            </Button>
            <Button
              onClick={handleRedo}
              disabled={editorState.getRedoStack().size === 0}
              icon={<RedoOutlined />}
            >
              重做
            </Button>
          </Space>
          
          <div style={{ 
            border: '1px solid #d9d9d9', 
            borderRadius: '6px', 
            padding: '12px', 
            minHeight: '200px',
            cursor: 'text'
          }}>
            <Editor
              editorState={editorState}
              onChange={setEditorState}
              handleKeyCommand={handleKeyCommand}
              placeholder="输入内容..."
            />
          </div>
        </div>
        
        <div style={{ marginTop: '20px' }}>
          <Button onClick={handleGetContent}>获取内容</Button>
        </div>
      </Card>
    </div>
  );
};

export default DraftJSPage;